<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>❤❤❤卷卷的家庭菜单❤❤❤</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        :root {
            --primary: #FF9AA2; /* 柔和的粉红色 */
            --secondary: #FFB7B2; /* 更浅的粉红色 */
            --accent: #FFDAC1; /* 柔和的橙色 */
            --light: #f5f5f5; /* 浅灰色 */
            --dark: #333333;
            --breakfast: #B5EAD7; /* 柔和的薄荷绿 */
            --lunch: #C7CEEA; /* 柔和的淡紫色 */
            --dinner: #FFD8B1; /* 柔和的杏色 */
            --dessert: #E2F0CB; /* 柔和的黄绿色 */
            --vegetarian: #B5EAD7;
            --edit: #8BB3CC; /* 柔和的蓝色 */
            --delete: #FF9AA2; /* 柔和的粉红色 */
            --success: #77DD77;
            --loading: #FFB347;
        }
        
        body {
            background-color: #FFF9F4;
            color: var(--dark);
            line-height: 1.6;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 25px 0;
            text-align: center;
            border-radius: 0 0 20px 20px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            margin-bottom: 30px;
            position: relative;
            overflow: hidden;
        }
        
        header::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 Z" fill="rgba(255,255,255,0.1)"/></svg>');
            background-size: cover;
        }
        
        .logo {
            font-size: 2.8rem;
            margin-bottom: 10px;
            position: relative;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }
        
        .logo i {
            margin-right: 15px;
            animation: pulse 2s infinite;
        }
        
        .tagline {
            font-size: 1.3rem;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto;
            position: relative;
            font-weight: 300;
        }
        
        .main-content {
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
        }
        
        .section {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            flex: 1;
            min-width: 300px;
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease;
        }
        
        .section:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        }
        
        .section-title {
            color: var(--primary);
            border-bottom: 2px solid var(--accent);
            padding-bottom: 12px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            font-size: 1.5rem;
        }
        
        .section-title i {
            margin-right: 12px;
            background: var(--accent);
            padding: 8px;
            border-radius: 50%;
            color: white;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .recipe-card {
            background: var(--light);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            transition: transform 0.3s, box-shadow 0.3s;
            cursor: pointer;
            position: relative;
            border-left: 4px solid var(--primary);
        }
        
        .recipe-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 15px rgba(0,0,0,0.08);
        }
        
        .recipe-name {
            font-weight: bold;
            font-size: 1.3rem;
            margin-bottom: 8px;
            color: var(--primary);
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .recipe-category {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
            margin-left: 10px;
            color: white;
        }
        
        .recipe-details {
            display: none;
            margin-top: 10px;
            padding: 10px;
            background: white;
            border-radius: 8px;
            border-left: 3px solid var(--secondary);
        }
        
        .recipe-card.active .recipe-details {
            display: block;
            animation: fadeIn 0.5s ease;
        }
        
        .detail-title {
            font-weight: bold;
            color: var(--secondary);
            margin: 12px 0 6px;
            display: flex;
            align-items: center;
        }
        
        .detail-title i {
            margin-right: 8px;
        }
        
        .btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 10px 18px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            margin-right: 10px;
            margin-top: 10px;
            box-shadow: 0 3px 6px rgba(0,0,0,0.08);
        }
        
        .btn i {
            margin-right: 6px;
        }
        
        .btn:hover {
            background: var(--secondary);
            transform: translateY(-2px);
            box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        }
        
        .btn-edit {
            background: var(--edit);
        }
        
        .btn-edit:hover {
            background: #7AA2C7;
        }
        
        .btn-delete {
            background: var(--delete);
        }
        
        .btn-delete:hover {
            background: #FF8C94;
        }
        
        .btn-share {
            background: #8BB3CC;
        }
        
        .btn-share:hover {
            background: #7AA2C7;
        }
        
        .btn-outline {
            background: transparent;
            border: 1px solid var(--primary);
            color: var(--primary);
        }
        
        .btn-outline:hover {
            background: var(--primary);
            color: white;
        }
        
        .form-group {
            margin-bottom: 18px;
        }
        
        label {
            display: block;
            margin-bottom: 6px;
            font-weight: 500;
            color: var(--dark);
        }
        
        input, textarea, select {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 1rem;
            transition: border 0.3s;
        }
        
        input:focus, textarea:focus, select:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(255, 154, 162, 0.2);
        }
        
        textarea {
            min-height: 120px;
            resize: vertical;
        }
        
        .cart-item {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px dashed #ddd;
            align-items: center;
        }
        
        .cart-total {
            font-weight: bold;
            font-size: 1.3rem;
            text-align: right;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 2px solid var(--accent);
        }
        
        .tabs {
            display: flex;
            margin-bottom: 25px;
            border-bottom: 1px solid #ddd;
            flex-wrap: wrap;
        }
        
        .tab {
            padding: 12px 25px;
            cursor: pointer;
            background: #f0f0f0;
            border-radius: 8px 8px 0 0;
            margin-right: 5px;
            transition: all 0.3s;
            font-weight: 500;
        }
        
        .tab:hover {
            background: #e0e0e0;
        }
        
        .tab.active {
            background: var(--primary);
            color: white;
        }
        
        .tab-content {
            display: none;
            animation: fadeIn 0.5s ease;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            background: var(--primary);
            color: white;
            padding: 18px 28px;
            border-radius: 10px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
            z-index: 1000;
            display: none;
            animation: slideIn 0.5s, fadeOut 0.5s 2.5s forwards;
        }
        
        .notification.error {
            background: var(--delete);
        }
        
        .notification.success {
            background: var(--success);
        }
        
        .notification.loading {
            background: var(--loading);
        }
        
        footer {
            text-align: center;
            margin-top: 50px;
            padding: 25px;
            color: #666;
            font-size: 0.95rem;
            background: white;
            border-radius: 15px 15px 0 0;
            box-shadow: 0 -5px 15px rgba(0,0,0,0.05);
        }
        
        .search-filter-container {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }
        
        .search-box {
            flex: 1;
            min-width: 250px;
            position: relative;
        }
        
        .search-box i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #777;
        }
        
        .search-box input {
            padding-left: 45px;
        }
        
        .filter-box {
            min-width: 200px;
        }
        
        .category-tag {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 15px;
            font-size: 0.85rem;
            margin: 3px 5px 3px 0;
            color: white;
        }
        
        .category-badge {
            padding: 3px 10px;
            border-radius: 15px;
            font-size: 0.8rem;
            margin-right: 8px;
            color: white;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .category-badge:hover {
            transform: scale(1.05);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .breakfast { background: var(--breakfast); }
        .lunch { background: var(--lunch); }
        .dinner { background: var(--dinner); }
        .dessert { background: var(--dessert); }
        .vegetarian { background: var(--vegetarian); }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .stats-container {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }
        
        .stat-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            flex: 1;
            min-width: 200px;
            text-align: center;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
            transition: transform 0.3s;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
        }
        
        .stat-value {
            font-size: 2.5rem;
            font-weight: bold;
            color: var(--primary);
            margin: 10px 0;
        }
        
        .stat-label {
            color: #666;
            font-size: 0.95rem;
        }
        
        .material-list {
            background: #f9f9f9;
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
            border-left: 3px solid var(--accent);
        }
        
        .material-item {
            padding: 8px 0;
            border-bottom: 1px dashed #ddd;
            display: flex;
            justify-content: space-between;
        }
        
        .material-item:last-child {
            border-bottom: none;
        }
        
        .edit-form-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2000;
            display: none;
        }
        
        .edit-form {
            background: white;
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            position: relative;
        }
        
        .close-edit {
            position: absolute;
            top: 15px;
            right: 15px;
            background: var(--delete);
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1.2rem;
            transition: all 0.2s;
            z-index: 10;
        }
        
        .close-edit:hover {
            transform: scale(1.1);
        }
        
        .share-container {
            background: white;
            border-radius: 15px;
            padding: 30px;
            max-width: 800px;
            margin: 20px auto;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            text-align: center;
        }
        
        .share-title {
            color: var(--primary);
            font-size: 1.8rem;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        
        .share-image-container {
            margin: 25px 0;
            border: 1px solid #eee;
            border-radius: 10px;
            overflow: hidden;
            background: white;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
            cursor: pointer;
            transition: transform 0.3s;
        }
        
        .share-image-container:hover {
            transform: scale(1.02);
        }
        
        .share-image-container img {
            max-width: 100%;
            display: block;
        }
        
        .share-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-top: 25px;
            flex-wrap: wrap;
        }
        
        .share-btn {
            padding: 12px 25px;
            border-radius: 8px;
            color: white;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .share-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        }
        
        .share-btn i {
            font-size: 1.5rem;
        }
        
        .share-whatsapp {
            background: #25D366;
        }
        
        .share-wechat {
            background: #09BB07;
        }
        
        .share-download {
            background: var(--primary);
        }
        
        .image-preview-container {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.9);
            z-index: 3000;
            align-items: center;
            justify-content: center;
        }
        
        .image-preview-content {
            background: white;
            border-radius: 15px;
            max-width: 90%;
            max-height: 90%;
            overflow: auto;
            position: relative;
        }
        
        .close-preview {
            position: absolute;
            top: 15px;
            right: 15px;
            background: var(--delete);
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1.5rem;
            z-index: 10;
            transition: all 0.2s;
        }
        
        .close-preview:hover {
            transform: rotate(90deg);
        }
        
        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
            margin-right: 10px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .recipe-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #777;
        }
        
        .empty-state i {
            font-size: 3rem;
            margin-bottom: 15px;
            color: var(--accent);
        }
        
        .empty-state p {
            margin-top: 10px;
        }
        
        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
            }
            
            .search-filter-container {
                flex-direction: column;
            }
            
            .logo {
                font-size: 2.2rem;
            }
            
            .share-buttons {
                flex-direction: column;
            }
            
            .share-btn {
                width: 100%;
                justify-content: center;
            }
            
            .recipe-actions {
                flex-direction: column;
            }
            
            .recipe-actions .btn {
                width: 100%;
                justify-content: center;
            }
            
            .edit-form {
                max-height: 80vh;
            }
        }
    </style>
</head>
<body>
    <div class="edit-form-container" id="edit-form-container">
        <div class="edit-form">
            <div class="close-edit" id="close-edit">
                <i class="fas fa-times"></i>
            </div>
            <h2 class="section-title"><i class="fas fa-edit"></i> 编辑食谱</h2>
            <div class="form-group">
                <label for="edit-recipe-name">食谱名称</label>
                <input type="text" id="edit-recipe-name" placeholder="例如：番茄炒蛋">
            </div>
            <div class="form-group">
                <label for="edit-recipe-category">分类（可多选，用逗号分隔）</label>
                <input type="text" id="edit-recipe-category" placeholder="例如：午餐, 素食">
                <div style="margin-top: 8px;">
                    <span class="category-badge breakfast" data-category="早餐">早餐</span>
                    <span class="category-badge lunch" data-category="午餐">午餐</span>
                    <span class="category-badge dinner" data-category="晚餐">晚餐</span>
                    <span class="category-badge dessert" data-category="甜点">甜点</span>
                    <span class="category-badge vegetarian" data-category="素食">素食</span>
                </div>
            </div>
            <div class="form-group">
                <label for="edit-recipe-ingredients">材料（每行一个）</label>
                <textarea id="edit-recipe-ingredients" placeholder="例如：
鸡蛋 3个
番茄 2个
盐 适量"></textarea>
            </div>
            <div class="form-group">
                <label for="edit-recipe-steps">制作步骤（每行一步）</label>
                <textarea id="edit-recipe-steps" placeholder="例如：
1. 鸡蛋打散，番茄切块
2. 热锅凉油，先炒鸡蛋"></textarea>
            </div>
            <button class="btn" id="update-recipe">
                <i class="fas fa-save"></i> 更新食谱
            </button>
            <input type="hidden" id="edit-recipe-id">
        </div>
    </div>
    
    <div class="image-preview-container" id="image-preview-container">
        <div class="image-preview-content">
            <div class="close-preview" id="close-preview">
                <i class="fas fa-times"></i>
            </div>
            <img id="preview-image" alt="菜单分享图片预览">
        </div>
    </div>
    
    <header>
        <div class="container">
            <div class="logo">
                <i class="fas fa-utensils"></i>
                ❤❤❤卷卷的家庭菜单❤❤❤
            </div>
            <p class="tagline">马克龙色系风格</p>
        </div>
    </header>
    
    <div class="container">
        <div class="stats-container">
            <div class="stat-card">
                <div class="stat-value" id="recipe-count">0</div>
                <div class="stat-label">总食谱数</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="category-count">0</div>
                <div class="stat-label">分类数量</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="cart-count">0</div>
                <div class="stat-label">购物车食谱</div>
            </div>
        </div>
        
        <div class="tabs">
            <div class="tab active" data-tab="recipes">食谱管理</div>
            <div class="tab" data-tab="cart">购物车</div>
            <div class="tab" data-tab="order">下单</div>
        </div>
        
        <div class="tab-content active" id="recipes-tab">
            <div class="search-filter-container">
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" id="search-input" placeholder="搜索食谱名称或材料...">
                </div>
                <div class="filter-box">
                    <select id="category-filter">
                        <option value="">所有分类</option>
                        <option value="早餐">早餐</option>
                        <option value="午餐">午餐</option>
                        <option value="晚餐">晚餐</option>
                        <option value="甜点">甜点</option>
                        <option value="素食">素食</option>
                    </select>
                </div>
            </div>
            
            <div class="main-content">
                <div class="section" style="flex: 2;">
                    <h2 class="section-title"><i class="fas fa-book"></i> 食谱列表</h2>
                    <div id="recipe-list">
                        <!-- 食谱列表将由JS生成 -->
                    </div>
                </div>
                
                <div class="section">
                    <h2 class="section-title"><i class="fas fa-plus-circle"></i> 添加新食谱</h2>
                    <div class="form-group">
                        <label for="recipe-name">食谱名称</label>
                        <input type="text" id="recipe-name" placeholder="例如：番茄炒蛋">
                    </div>
                    <div class="form-group">
                        <label for="recipe-category">分类（可多选，用逗号分隔）</label>
                        <input type="text" id="recipe-category" placeholder="例如：午餐, 素食">
                        <div style="margin-top: 8px;">
                            <span class="category-badge breakfast" data-category="早餐">早餐</span>
                            <span class="category-badge lunch" data-category="午餐">午餐</span>
                            <span class="category-badge dinner" data-category="晚餐">晚餐</span>
                            <span class="category-badge dessert" data-category="甜点">甜点</span>
                            <span class="category-badge vegetarian" data-category="素食">素食</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="recipe-ingredients">材料（每行一个）</label>
                        <textarea id="recipe-ingredients" placeholder="例如：
鸡蛋 3个
番茄 2个
盐 适量"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="recipe-steps">制作步骤（每行一步）</label>
                        <textarea id="recipe-steps" placeholder="例如：
1. 鸡蛋打散，番茄切块
2. 热锅凉油，先炒鸡蛋"></textarea>
                    </div>
                    <button class="btn" id="add-recipe">
                        <i class="fas fa-save"></i> 保存食谱
                    </button>
                </div>
            </div>
        </div>
        
        <div class="tab-content" id="cart-tab">
            <div class="section">
                <h2 class="section-title"><i class="fas fa-shopping-cart"></i> 购物车</h2>
                <div id="cart-items">
                    <!-- 购物车内容将由JS生成 -->
                </div>
                <div class="cart-total">
                    总计: <span id="cart-total">0</span> 项食材
                </div>
                <button class="btn" id="checkout-btn">
                    <i class="fas fa-check"></i> 确认下单
                </button>
            </div>
        </div>
        
        <div class="tab-content" id="order-tab">
            <div class="section">
                <h2 class="section-title"><i class="fas fa-clipboard-list"></i> 下单信息</h2>
                <div style="text-align: center; padding: 30px;">
                    <i class="fas fa-check-circle" style="font-size: 5rem; color: #4CAF50; margin-bottom: 20px;"></i>
                    <h3 style="margin-bottom: 20px; color: var(--primary);">您的订单已提交！</h3>
                    
                    <p style="margin: 20px 0;">订单包含以下食谱：</p>
                    <div id="order-summary" style="margin: 20px 0; padding: 15px; background: #f9f7f5; border-radius: 10px; text-align: left;"></div>
                    
                    <h4 style="text-align: left; margin-top: 25px; color: var(--primary);">所需材料汇总：</h4>
                    <div id="material-summary" class="material-list">
                        <!-- 材料汇总将由JS生成 -->
                    </div>
                    
                    <button class="btn btn-share" id="generate-share-image" style="margin-top: 25px;">
                        <i class="fas fa-image"></i> 生成分享图片
                    </button>
                    
                    <div id="share-image-container" class="share-image-container" style="display: none; margin-top: 30px;">
                        <!-- 分享图片预览 -->
                    </div>
                    
                    <div class="share-buttons" id="share-buttons" style="display: none; margin-top: 20px;">
                        <div class="share-btn share-download" id="download-image">
                            <i class="fas fa-download"></i>
                            <span>下载图片</span>
                        </div>
                    </div>
                    
                    <button class="btn" id="back-to-recipes" style="margin-top: 20px;">
                        <i class="fas fa-arrow-left"></i> 返回食谱管理
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <div class="notification" id="notification">
        操作成功！
    </div>
    
    <div class="share-container" id="share-image-preview" style="display: none; position: absolute; top: -9999px; left: -9999px;">
        <h2 class="share-title">
            <i class="fas fa-utensils"></i>
            家庭菜单分享
        </h2>
        <div id="share-content" style="padding: 30px; text-align: left; font-family: 'Arial', sans-serif;">
            <!-- 分享内容将由JS生成 -->
        </div>
    </div>
    
    <footer>
        <div class="container">
            <p>❤❤❤卷卷的家庭菜单❤❤❤</p>
            <p>© 2025家庭菜单 | 设计：柔美马克龙色系</p>
        </div>
    </footer>

    <script>
        // 初始化数据
        let recipes = JSON.parse(localStorage.getItem('recipes')) || [
            {
                id: 1,
                name: "番茄炒蛋",
                categories: ["午餐", "素食"],
                ingredients: ["鸡蛋 3个", "番茄 2个", "盐 适量", "糖 少许", "葱花 少许"],
                steps: ["1. 鸡蛋打散，番茄切块备用", "2. 热锅凉油，倒入蛋液炒至半熟盛出", "3. 锅中再加少许油，放入番茄块翻炒", "4. 加入盐和糖调味", "5. 倒入炒好的鸡蛋，翻炒均匀", "6. 撒上葱花即可出锅"]
            },
            {
                id: 2,
                name: "红烧肉",
                categories: ["晚餐"],
                ingredients: ["五花肉 500g", "冰糖 30g", "生抽 2勺", "老抽 1勺", "料酒 2勺", "姜片 3片", "葱段 适量"],
                steps: ["1. 五花肉切块焯水备用", "2. 锅中放少许油，加入冰糖炒至融化呈焦糖色", "3. 放入五花肉翻炒上色", "4. 加入生抽、老抽、料酒翻炒均匀", "5. 加入姜片、葱段和适量热水", "6. 小火炖煮1小时至肉烂", "7. 大火收汁即可"]
            },
            {
                id: 3,
                name: "水果沙拉",
                categories: ["早餐", "甜点", "素食"],
                ingredients: ["苹果 1个", "香蕉 2根", "葡萄 适量", "酸奶 1杯", "蜂蜜 适量"],
                steps: ["1. 所有水果洗净切块", "2. 放入大碗中混合", "3. 加入酸奶和蜂蜜", "4. 轻轻搅拌均匀即可"]
            }
        ];
        
        let cart = JSON.parse(localStorage.getItem('cart')) || [];
        let allCategories = new Set();
        let currentOrder = null;
        let currentImageData = null;
        
        // DOM元素
        const recipeListEl = document.getElementById('recipe-list');
        const cartItemsEl = document.getElementById('cart-items');
        const cartTotalEl = document.getElementById('cart-total');
        const orderSummaryEl = document.getElementById('order-summary');
        const materialSummaryEl = document.getElementById('material-summary');
        const notificationEl = document.getElementById('notification');
        const tabs = document.querySelectorAll('.tab');
        const tabContents = document.querySelectorAll('.tab-content');
        const searchInput = document.getElementById('search-input');
        const categoryFilter = document.getElementById('category-filter');
        const recipeCountEl = document.getElementById('recipe-count');
        const categoryCountEl = document.getElementById('category-count');
        const cartCountEl = document.getElementById('cart-count');
        const editFormContainer = document.getElementById('edit-form-container');
        const shareImagePreview = document.getElementById('share-image-preview');
        const shareContent = document.getElementById('share-content');
        const shareImageContainer = document.getElementById('share-image-container');
        const shareButtons = document.getElementById('share-buttons');
        const imagePreviewContainer = document.getElementById('image-preview-container');
        const previewImage = document.getElementById('preview-image');
        
        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 提取所有分类
            extractCategories();
            
            loadRecipes();
            loadCart();
            setupEventListeners();
            updateStats();
        });
        
        // 提取所有分类
        function extractCategories() {
            allCategories.clear();
            recipes.forEach(recipe => {
                recipe.categories.forEach(cat => allCategories.add(cat));
            });
        }
        
        // 加载食谱
        function loadRecipes(filteredRecipes = recipes) {
            recipeListEl.innerHTML = '';
            
            if (filteredRecipes.length === 0) {
                recipeListEl.innerHTML = '<div class="empty-state"><i class="fas fa-book-open"></i><p>没有找到匹配的食谱</p></div>';
                return;
            }
            
            filteredRecipes.forEach(recipe => {
                const recipeEl = document.createElement('div');
                recipeEl.className = 'recipe-card';
                recipeEl.dataset.id = recipe.id;
                
                // 生成分类标签
                const categoryTags = recipe.categories.map(cat => {
                    // 为每个分类标签添加对应的CSS类
                    let cssClass = 'category-tag';
                    switch(cat) {
                        case '早餐': cssClass += ' breakfast'; break;
                        case '午餐': cssClass += ' lunch'; break;
                        case '晚餐': cssClass += ' dinner'; break;
                        case '甜点': cssClass += ' dessert'; break;
                        case '素食': cssClass += ' vegetarian'; break;
                        default: cssClass += ' lunch'; // 默认样式
                    }
                    return `<span class="${cssClass}">${cat}</span>`;
                }).join('');
                
                recipeEl.innerHTML = `
                    <div class="recipe-name">
                        ${recipe.name}
                        ${categoryTags}
                    </div>
                    <div class="recipe-actions">
                        <button class="btn btn-outline add-to-cart" data-id="${recipe.id}">
                            <i class="fas fa-cart-plus"></i> 加入购物车
                        </button>
                        <button class="btn btn-edit edit-recipe" data-id="${recipe.id}">
                            <i class="fas fa-edit"></i> 编辑
                        </button>
                        <button class="btn btn-delete delete-recipe" data-id="${recipe.id}">
                            <i class="fas fa-trash"></i> 删除
                        </button>
                    </div>
                    <div class="recipe-details">
                        <div class="detail-title">
                            <i class="fas fa-shopping-basket"></i> 所需材料:
                        </div>
                        <ul>
                            ${recipe.ingredients.map(ing => `<li>${ing}</li>`).join('')}
                        </ul>
                        <div class="detail-title">
                            <i class="fas fa-list-ol"></i> 制作步骤:
                        </div>
                        <ol>
                            ${recipe.steps.map(step => `<li>${step}</li>`).join('')}
                        </ol>
                    </div>
                `;
                
                recipeListEl.appendChild(recipeEl);
                
                // 点击食谱卡片展开详情
                recipeEl.querySelector('.recipe-name').addEventListener('click', () => {
                    recipeEl.classList.toggle('active');
                });
            });
            
            // 保存到本地存储
            saveToLocalStorage();
        }
        
        // 加载购物车
        function loadCart() {
            cartItemsEl.innerHTML = '';
            
            if (cart.length === 0) {
                cartItemsEl.innerHTML = '<div class="empty-state"><i class="fas fa-shopping-cart"></i><p>购物车为空，请添加食谱</p></div>';
                cartTotalEl.textContent = '0';
                cartCountEl.textContent = '0';
                return;
            }
            
            let totalItems = 0;
            
            cart.forEach(item => {
                const recipe = recipes.find(r => r.id === item.id);
                if (!recipe) return;
                
                const cartItemEl = document.createElement('div');
                cartItemEl.className = 'cart-item';
                
                cartItemEl.innerHTML = `
                    <div>
                        <strong>${recipe.name}</strong>
                        <div>${recipe.ingredients.length} 种材料</div>
                    </div>
                    <div>
                        <button class="btn btn-delete remove-from-cart" data-id="${recipe.id}">
                            <i class="fas fa-trash"></i> 移除
                        </button>
                    </div>
                `;
                
                cartItemsEl.appendChild(cartItemEl);
                totalItems += recipe.ingredients.length;
            });
            
            cartTotalEl.textContent = totalItems;
            cartCountEl.textContent = cart.length;
            
            // 保存到本地存储
            saveToLocalStorage();
        }
        
        // 保存到本地存储
        function saveToLocalStorage() {
            localStorage.setItem('recipes', JSON.stringify(recipes));
            localStorage.setItem('cart', JSON.stringify(cart));
        }
        
        // 设置事件监听
        function setupEventListeners() {
            // 添加食谱
            document.getElementById('add-recipe').addEventListener('click', addRecipe);
            
            // 加入购物车
            document.addEventListener('click', (e) => {
                if (e.target.closest('.add-to-cart')) {
                    const recipeId = parseInt(e.target.closest('.add-to-cart').dataset.id);
                    addToCart(recipeId);
                }
                
                if (e.target.closest('.remove-from-cart')) {
                    const recipeId = parseInt(e.target.closest('.remove-from-cart').dataset.id);
                    removeFromCart(recipeId);
                }
                
                if (e.target.closest('.delete-recipe')) {
                    const recipeId = parseInt(e.target.closest('.delete-recipe').dataset.id);
                    deleteRecipe(recipeId);
                }
                
                // 编辑食谱
                if (e.target.closest('.edit-recipe')) {
                    const recipeId = parseInt(e.target.closest('.edit-recipe').dataset.id);
                    openEditForm(recipeId);
                }
            });
            
            // 标签切换
            tabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    const tabName = tab.dataset.tab;
                    
                    // 更新标签状态
                    tabs.forEach(t => t.classList.remove('active'));
                    tab.classList.add('active');
                    
                    // 更新内容显示
                    tabContents.forEach(content => content.classList.remove('active'));
                    document.getElementById(`${tabName}-tab`).classList.add('active');
                });
            });
            
            // 下单按钮
            document.getElementById('checkout-btn').addEventListener('click', placeOrder);
            
            // 返回按钮
            document.getElementById('back-to-recipes').addEventListener('click', () => {
                tabs.forEach(t => t.classList.remove('active'));
                tabContents.forEach(c => c.classList.remove('active'));
                
                document.querySelector('.tab[data-tab="recipes"]').classList.add('active');
                document.getElementById('recipes-tab').classList.add('active');
            });
            
            // 搜索功能
            searchInput.addEventListener('input', filterRecipes);
            
            // 分类筛选
            categoryFilter.addEventListener('change', filterRecipes);
            
            // 关闭编辑表单
            document.getElementById('close-edit').addEventListener('click', () => {
                editFormContainer.style.display = 'none';
            });
            
            // 更新食谱
            document.getElementById('update-recipe').addEventListener('click', updateRecipe);
            
            // 生成分享图片
            document.getElementById('generate-share-image').addEventListener('click', generateShareImage);
            
            // 下载图片
            document.getElementById('download-image').addEventListener('click', downloadImage);
            
            // 关闭图片预览
            document.getElementById('close-preview').addEventListener('click', () => {
                imagePreviewContainer.style.display = 'none';
            });
            
            // 分类标签点击事件
            document.querySelectorAll('.category-badge').forEach(badge => {
                badge.addEventListener('click', () => {
                    const category = badge.dataset.category;
                    const input = badge.closest('.form-group').querySelector('input[type="text"]');
                    let currentValue = input.value.trim();
                    
                    // 处理当前输入值
                    const categories = currentValue ? currentValue.split(',').map(c => c.trim()) : [];
                    const index = categories.indexOf(category);
                    
                    if (index === -1) {
                        // 添加分类
                        categories.push(category);
                    } else {
                        // 移除分类
                        categories.splice(index, 1);
                    }
                    
                    input.value = categories.join(', ');
                });
            });
        }
        
        // 打开编辑表单
        function openEditForm(recipeId) {
            const recipe = recipes.find(r => r.id === recipeId);
            if (!recipe) return;
            
            // 填充表单数据
            document.getElementById('edit-recipe-id').value = recipe.id;
            document.getElementById('edit-recipe-name').value = recipe.name;
            document.getElementById('edit-recipe-category').value = recipe.categories.join(', ');
            document.getElementById('edit-recipe-ingredients').value = recipe.ingredients.join('\n');
            document.getElementById('edit-recipe-steps').value = recipe.steps.join('\n');
            
            // 显示编辑表单
            editFormContainer.style.display = 'flex';
        }
        
        // 更新食谱
        function updateRecipe() {
            const id = parseInt(document.getElementById('edit-recipe-id').value);
            const name = document.getElementById('edit-recipe-name').value;
            const categories = document.getElementById('edit-recipe-category').value
                .split(',')
                .map(cat => cat.trim())
                .filter(cat => cat);
            const ingredients = document.getElementById('edit-recipe-ingredients').value.split('\n').filter(line => line.trim());
            const steps = document.getElementById('edit-recipe-steps').value.split('\n').filter(line => line.trim());
            
            if (!name || ingredients.length === 0 || steps.length === 0) {
                showNotification('请填写完整的食谱信息！', 'error');
                return;
            }
            
            // 更新食谱
            const index = recipes.findIndex(r => r.id === id);
            if (index !== -1) {
                recipes[index] = {
                    ...recipes[index],
                    id,
                    name,
                    categories,
                    ingredients,
                    steps
                };
                
                // 更新分类
                extractCategories();
                
                // 重新加载
                loadRecipes();
                filterRecipes();
                
                // 关闭表单
                editFormContainer.style.display = 'none';
                
                showNotification('食谱更新成功！', 'success');
                updateStats();
            }
        }
        
        // 过滤食谱
        function filterRecipes() {
            const searchTerm = searchInput.value.toLowerCase();
            const selectedCategory = categoryFilter.value;
            
            const filtered = recipes.filter(recipe => {
                // 检查分类
                if (selectedCategory && !recipe.categories.includes(selectedCategory)) {
                    return false;
                }
                
                // 检查搜索词
                if (searchTerm) {
                    const nameMatch = recipe.name.toLowerCase().includes(searchTerm);
                    const ingredientMatch = recipe.ingredients.some(ing => 
                        ing.toLowerCase().includes(searchTerm)
                    );
                    
                    return nameMatch || ingredientMatch;
                }
                
                return true;
            });
            
            loadRecipes(filtered);
        }
        
        // 添加新食谱
        function addRecipe() {
            const name = document.getElementById('recipe-name').value;
            const categories = document.getElementById('recipe-category').value
                .split(',')
                .map(cat => cat.trim())
                .filter(cat => cat);
            const ingredients = document.getElementById('recipe-ingredients').value.split('\n').filter(line => line.trim());
            const steps = document.getElementById('recipe-steps').value.split('\n').filter(line => line.trim());
            
            if (!name) {
                showNotification('请填写食谱名称！', 'error');
                return;
            }
            
            if (ingredients.length === 0) {
                showNotification('请填写至少一种材料！', 'error');
                return;
            }
            
            if (steps.length === 0) {
                showNotification('请填写至少一个制作步骤！', 'error');
                return;
            }
            
            const newRecipe = {
                id: Date.now(),
                name,
                categories,
                ingredients,
                steps
            };
            
            recipes.push(newRecipe);
            
            // 更新分类
            categories.forEach(cat => allCategories.add(cat));
            
            // 重新加载
            loadRecipes();
            filterRecipes();
            
            // 清空表单
            document.getElementById('recipe-name').value = '';
            document.getElementById('recipe-category').value = '';
            document.getElementById('recipe-ingredients').value = '';
            document.getElementById('recipe-steps').value = '';
            
            showNotification('食谱添加成功！', 'success');
            updateStats();
        }
        
        // 删除食谱
        function deleteRecipe(id) {
            if (confirm('确定要删除这个食谱吗？')) {
                recipes = recipes.filter(recipe => recipe.id !== id);
                cart = cart.filter(item => item.id !== id);
                
                extractCategories();
                loadRecipes();
                loadCart();
                filterRecipes();
                
                showNotification('食谱已删除', 'success');
                updateStats();
            }
        }
        
        // 添加到购物车
        function addToCart(id) {
            // 防止重复添加
            if (!cart.some(item => item.id === id)) {
                cart.push({ id });
                loadCart();
                showNotification('已添加到购物车', 'success');
                updateStats();
            } else {
                showNotification('已在购物车中', 'error');
            }
        }
        
        // 从购物车移除
        function removeFromCart(id) {
            cart = cart.filter(item => item.id !== id);
            loadCart();
            showNotification('已从购物车移除', 'success');
            updateStats();
        }
        
        // 下单
        function placeOrder() {
            if (cart.length === 0) {
                showNotification('购物车为空，无法下单', 'error');
                return;
            }
            
            // 保存当前订单
            currentOrder = {
                items: [],
                materials: getMaterialSummary()
            };
            
            cart.forEach(item => {
                const recipe = recipes.find(r => r.id === item.id);
                if (recipe) {
                    currentOrder.items.push({
                        id: recipe.id,
                        name: recipe.name
                    });
                }
            });
            
            // 生成订单摘要
            let summaryHTML = '<ul>';
            currentOrder.items.forEach((item, index) => {
                summaryHTML += `<li>${index + 1}. <strong>${item.name}</strong></li>`;
            });
            summaryHTML += '</ul>';
            
            orderSummaryEl.innerHTML = summaryHTML;
            
            // 生成材料汇总
            generateMaterialSummary();
            
            // 切换到订单页面
            tabs.forEach(t => t.classList.remove('active'));
            tabContents.forEach(c => c.classList.remove('active'));
            
            document.querySelector('.tab[data-tab="order"]').classList.add('active');
            document.getElementById('order-tab').classList.add('active');
            
            // 隐藏之前的分享内容
            shareImageContainer.style.display = 'none';
            shareButtons.style.display = 'none';
            
            showNotification('订单提交成功！', 'success');
            
            // 清空购物车
            cart = [];
            loadCart();
            updateStats();
        }
        
        // 生成材料汇总
        function generateMaterialSummary() {
            const materials = getMaterialSummary();
            let materialHTML = '';
            
            if (materials.length === 0) {
                materialHTML = '<p>没有材料信息</p>';
            } else {
                materials.forEach((item, index) => {
                    materialHTML += `
                        <div class="material-item">
                            <div>${index + 1}. ${item.name}</div>
                            <div>${item.quantity}</div>
                        </div>
                    `;
                });
            }
            
            materialSummaryEl.innerHTML = materialHTML;
        }
        
        // 获取材料汇总
        function getMaterialSummary() {
            const materialList = [];
            
            cart.forEach(item => {
                const recipe = recipes.find(r => r.id === item.id);
                if (recipe) {
                    recipe.ingredients.forEach(ingredient => {
                        // 不再合并材料，而是直接添加
                        materialList.push({
                            name: ingredient,
                            quantity: "1"
                        });
                    });
                }
            });
            
            return materialList;
        }
        
        // 生成分享图片
        function generateShareImage() {
            if (!currentOrder || currentOrder.items.length === 0) {
                showNotification('没有订单信息可分享', 'error');
                return;
            }
            
            // 显示加载状态
            showNotification('<span class="loading-spinner"></span> 正在生成分享图片...', 'loading');
            
            // 创建分享内容
            const now = new Date();
            const dateStr = `${now.getFullYear()}年${now.getMonth()+1}月${now.getDate()}日`;
            
            shareContent.innerHTML = `
                <div style="text-align: center; margin-bottom: 20px;">
                    <h2 style="color: #FF9AA2; margin-bottom: 5px; font-size: 2.2rem;">家庭菜单分享</h2>
                    <p style="color: #666; margin-bottom: 15px; font-size: 1.1rem;">${dateStr}</p>
                </div>
                
                <div style="display: flex; gap: 20px; margin-bottom: 20px;">
                    <div style="flex: 1; background: #FFF9F4; padding: 15px; border-radius: 10px; border: 1px solid #FFDAC1;">
                        <h3 style="color: #FF9AA2; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; font-size: 1.3rem;">
                            <i class="fas fa-list"></i> 订单内容
                        </h3>
                        <ul style="list-style-type: none; padding-left: 10px;">
                            ${currentOrder.items.map((item, index) => `
                                <li style="padding: 10px 0; border-bottom: 1px dashed #FFDAC1; display: flex; font-size: 1.1rem;">
                                    <span style="width: 25px; font-weight: bold; color: #FF9AA2;">${index + 1}.</span>
                                    <span>${item.name}</span>
                                </li>
                            `).join('')}
                        </ul>
                    </div>
                    
                    <div style="flex: 1; background: #FFF9F4; padding: 15px; border-radius: 10px; border: 1px solid #FFDAC1;">
                        <h3 style="color: #FF9AA2; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; font-size: 1.3rem;">
                            <i class="fas fa-shopping-basket"></i> 所需材料
                        </h3>
                        <div>
                            ${currentOrder.materials.map((mat, index) => `
                                <div style="display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed #FFDAC1; font-size: 1.1rem;">
                                    <div style="display: flex;">
                                        <span style="width: 25px; font-weight: bold; color: #FF9AA2;">${index + 1}.</span>
                                        <span>${mat.name}</span>
                                    </div>
                                    <div>${mat.quantity}</div>
                                </div>
                            `).join('')}
                        </div>
                    </div>
                </div>
                
                <div style="text-align: center; margin-top: 25px; color: #999; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 8px;">
                    <i class="fas fa-utensils"></i> 由家庭菜单管理系统生成
                </div>
            `;
            
            // 临时显示分享容器（在屏幕内）
            const tempContainer = document.createElement('div');
            tempContainer.style.position = 'fixed';
            tempContainer.style.top = '0';
            tempContainer.style.left = '0';
            tempContainer.style.width = '100%';
            tempContainer.style.height = '100%';
            tempContainer.style.display = 'flex';
            tempContainer.style.alignItems = 'center';
            tempContainer.style.justifyContent = 'center';
            tempContainer.style.zIndex = '9999';
            tempContainer.style.backgroundColor = 'rgba(255,255,255,0.9)';
            tempContainer.appendChild(shareImagePreview);
            document.body.appendChild(tempContainer);
            
            shareImagePreview.style.display = 'block';
            shareImagePreview.style.position = 'static';
            shareImagePreview.style.top = '0';
            shareImagePreview.style.left = '0';
            
            // 使用html2canvas生成图片
            html2canvas(shareImagePreview, {
                scale: 2,
                useCORS: true,
                backgroundColor: "#ffffff"
            }).then(canvas => {
                const imageData = canvas.toDataURL('image/png');
                currentImageData = imageData;
                
                // 创建图片元素
                const img = document.createElement('img');
                img.src = imageData;
                img.alt = '家庭菜单分享图片';
                img.style.maxWidth = '100%';
                
                // 清空容器并添加图片
                shareImageContainer.innerHTML = '';
                shareImageContainer.appendChild(img);
                shareImageContainer.style.display = 'block';
                
                // 显示分享按钮
                shareButtons.style.display = 'flex';
                
                // 设置预览图片
                previewImage.src = imageData;
                
                // 移除临时容器
                document.body.removeChild(tempContainer);
                shareImagePreview.style.display = 'none';
                shareImagePreview.style.position = 'absolute';
                shareImagePreview.style.top = '-9999px';
                shareImagePreview.style.left = '-9999px';
                
                showNotification('分享图片生成成功！', 'success');
            }).catch(error => {
                console.error('生成图片失败:', error);
                showNotification('生成图片失败，请重试', 'error');
                document.body.removeChild(tempContainer);
                shareImagePreview.style.display = 'none';
                shareImagePreview.style.position = 'absolute';
                shareImagePreview.style.top = '-9999px';
                shareImagePreview.style.left = '-9999px';
            });
        }
        
        // 下载图片
        function downloadImage() {
            if (currentImageData) {
                const link = document.createElement('a');
                link.href = currentImageData;
                const now = new Date();
                const dateStr = `${now.getFullYear()}年${now.getMonth()+1}月${now.getDate()}日`;
                link.download = `家庭菜单_${dateStr}.png`;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                showNotification('图片下载成功！', 'success');
            } else {
                showNotification('请先生成分享图片', 'error');
            }
        }
        
        // 显示通知
        function showNotification(message, type = '') {
            notificationEl.textContent = '';
            notificationEl.innerHTML = message;
            notificationEl.className = 'notification';
            
            if (type) {
                notificationEl.classList.add(type);
            }
            
            notificationEl.style.display = 'block';
            
            // 对于加载类型，不清除
            if (type !== 'loading') {
                setTimeout(() => {
                    notificationEl.style.display = 'none';
                }, 3000);
            }
        }
        
        // 更新统计信息
        function updateStats() {
            recipeCountEl.textContent = recipes.length;
            categoryCountEl.textContent = allCategories.size;
            cartCountEl.textContent = cart.length;
        }
    </script>
</body>
</html>